<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header" >添加</div>
                <div class="layui-card-body" style="text-align: center">
                    <form class="layui-form layui-form-pane" action="" lay-filter="costBhAddForm">
                        <div class="layui-block" style="margin-bottom: 10px">
                            <label class="layui-form-label">工时单价</label>
                            <div class="layui-input-block">
                                <input type="tel" name="bhPrice" lay-verify="required|number"  autocomplete="off" placeholder="必填：工时单价！" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-block" style="margin-bottom: 10px">
                            <label class="layui-form-label">备注原因</label>
                            <div class="layui-input-block">
                                <input type="tel" name="bhRemark"  autocomplete="off" placeholder="选填：更换原因！" class="layui-input">
                            </div>
                        </div>

<!--                        <div class="layui-form-item" pane style="margin-bottom: 10px" >-->
<!--                        <label class="layui-form-label">状态</label>-->
<!--                            <div class="layui-input-block" >-->
<!--                                <input type="checkbox" name="bhStatus" lay-skin="switch" lay-text="有效|无效">-->
<!--                            </div>-->
<!--                        </div>-->

                        <div class="layui-block">
                            <div class="layui-input-inline" style="text-align: right">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="costBhAdd" id="costBhAdd">重新更换</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header" style="text-align: center" >工时单价详情</div>
                <div class="layui-card-body" style="margin:0 auto;width: 100%">
                    <table id="costBhTable" lay-filter="costBhTable"></table>
                </div>
            </div>
        </div>
    </div>

</div>

<script  th:inline="none">
    layui.use(['table','form','layer', 'laydate'], function(){
        var table = layui.table,layer=layui.layer;
        var form = layui.form;

       var costbhTable= table.render({
            elem: '#costBhTable'
            ,id:'bhId'
            //,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,height: 600
            ,url: '/costReportForm/selectTimePrice' //数据接口
            ,cols: [[ //表头
                {field: 'bhId', title: '行列', width:80, sort: true, fixed: 'center'}
                ,{field: 'bhPrice', title: '工时单价', width:100}
                ,{field: 'bhTake', title: '有效时间', width:180}
                ,{field: 'bhLose', title: '失效时间', width:180}
                ,{field: 'bhStatus', title: '状态', width: 120,templet:function (d) {
                       if (d.bhLose){
                           return "<p style='color: red'>失效</p>"
                       }else {
                            return "<p style='color: #00FF00'>正常</p>"
                       }

                   }}
                ,{field: 'bhRemark', title: '备注'}

            ]]
        });

        //头工具栏事件
        table.on('toolbar(costBhTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;  //获取选中行数据
                    layer.alert(JSON.stringify(data));
                    break;
            };
        });

        //监听添加按钮，类型为submit
        form.on('submit(costBhAdd)', function(data){
            $.ajax({
                url:"/costReportForm/addTimePrice",
                data:data.field,
                success:function (data) {
                    if (data.statu==200){
                        //清空表单中的所有数据
                        $("#indexPasswordFrom")[0].reset();//indexmodifyForm.render();
                        //刷新表中的数据
                        console.log(costbhTable);
                        //window.parent.location.reload();//刷新整个页面
                        costbhTable.reload(data.data); //重新加载数据
                        layer.msg("添加成功！")
                    }else if (data.statu==500){
                        windowsOperation(null,null,data);
                    }

                },
                error:function (data) {
                    data={"message":"系统维护中，请稍候再试"}
                    windowsOperation(null,null,data);
                }
            })
            return false;//不跳转页面
        });

        form.val('costBhAddForm', {"bhStatus": true });//开关状态

    });
</script>
</body>
</html>